<!DOCTYPE html>
<html lang="en" ng-app="ss">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/command/bootstrap-4.4.1-dist/css/bootstrap.css">
    <script src="/command/jquery/jquery-3.4.1.js"></script>
    <script src="/command/angular/angular.js"></script>
    <script src="/command/angular/ss.js"></script>
    <style type="text/css">
        .talk_con {
            width: 600px;
            height: 400px;
            border: 1px solid #666;
            margin: 0px auto 0;
            background: #f9f9f9;
        }

        .talk_input {
            width: 580px;
            margin: 10px auto 0;
        }


        .atalk span {
            display: inline-block;
            background: #0181cc;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }

        .btalk span {
            display: inline-block;
            background: #ef8201;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }


        .center span {
            display: inline-block;
            border-radius: 10px;
            color: black;
            padding: 5px 10px;
        }
    </style>
</head>
<body ng-controller="actrl">
<div class="talk_con">
    <div id="oName"></div>
    <div class="talk_input">
        <div>
            范围：<select ng-model="x1" id="sel1" class="form-control">
            <option value="0">全体</option>
            <option value="1">单体</option>
        </select>
        </div>
        <div ng-show="b2">
            发送对象：<select ng-model="x2" id="sel2" class="form-control">
            <option value="0">请选择</option>
            <option ng-repeat="s in s2" value="{{s.id}}">{{s.username}}</option>
        </select>
        </div>
        <div>
            <textarea class="form-control" style="height: 100px" id="talkwords"></textarea>
            <input type="button" value="发送" style="float: right" class="btn btn-success" id="talksub">
        </div>
    </div>
</div>

<script>
    let TalkWords = document.getElementById("talkwords");
    let TalkSub = document.getElementById("talksub");

    TalkSub.onclick = function () {
        if (TalkWords.value == "") {
            // 消息为空时弹窗
            alert("消息不能为空");
            return;
        } else {
            sendMessage(TalkWords.value);
            TalkWords.value = "";
        }
    };

    let webSocket = null;
    if ("WebSocket" in window) {
        webSocket = new WebSocket("ws://localhost:8080/websocket/" +
            sessionStorage.getItem("uid") +
            "&sendNotice"
        );
    } else {
        alert("浏览器不支持webSocket！");
    }

    webSocket.onopen = function () {
        console.log("连接成功");
    };
    //刷新div

    webSocket.onmessage = function (event) {

    };

    function sendMessage(TalkWords) {
        let fw = document.getElementById("sel1").value;
        let toId = document.getElementById("sel2").value;
        let scope = 'all';
        if (fw == 1) {
            scope = 'single';
        }

        let message = JSON.stringify({
            'text': TalkWords,
            'type': 'notice',
            'toId': toId,
            'scope': scope
        });
        webSocket.send(message);
    }


    //关闭按钮调用函数
    function clo() {
        webSocket.close(3000, "强制关闭");
    }


    window.onbeforeunload = function () {
        clo();
    };
</script>
</body>
</html>
